<template>
  <div class="err-page w-flex-center">
    <span class="code">{{ error.statusCode }}</span>
    <nuxt-link class="back-home" to="/">
      返回首页
    </nuxt-link>
    <w-loading />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WLoading from '@/components/global/loading'

@Component({
  name: 'LayoutError',
  components: {
    WLoading
  }
})
export default class LayoutError extends Vue {
  @Prop() error!: any
}
</script>
<style lang="less">
.err-page {
  height: calc(100vh);
  flex-direction: column;
  .code {
    font-size: 100px;
    color: #eee;
  }
  .back-home {
    font-size: 16px;
    color: #ccc;
  }
  .back-home:hover {
    color: #999;
  }
}
</style>
